<template>
    <div v-infinite-scroll="loadMore"
         infinite-scroll-disabled="disableLoad">
        <SearchBar @searchParam="initParamAndLoad" ref="searchBar"></SearchBar>
        <el-row>
            <el-col :key="item.id" :span="6" style="padding: 15px" v-for="(item,i) in furnitures">
                <el-card body-style="padding: 5px" style="height: 450px">
                    <p :class="levelColor(item.level)"
                       style="text-align:center; font-size: 18px;font-family: 'Microsoft YaHei UI',serif">
                        <b>No.{{i+1}}&nbsp;{{item.name}}</b>&nbsp;{{item.typeDesc}}
                    </p>
                    <el-tooltip :open-delay=500 effect="light" placement="left">

                        <p slot="content" :class="levelColor(item.level)">名称：{{item.name}}</p>
                        <p slot="content">类型：{{item.typeDesc}}</p>
                        <div slot="content" v-if="item.source.toString() === '0'">来源：副本
                            <p slot="content">副本：{{item.sourceDesc}}</p>
                            <p slot="content">年代：{{item.sourceLevel}}</p>
                            <p slot="content">BOSS序号：{{item.bossNumber}}</p>
                            <p slot="content">BOSS名字：{{item.bossName}}</p>
                            <p slot="content">副本CD：{{item.resetCd}}</p>
                            <p slot="content">重置消耗：{{item.resetConsume}}</p>
                        </div>
                        <div slot="content" v-if="item.source.toString() === '1'">来源：声望
                            <p slot="content">声望：{{item.sourceDesc}}</p>
                            <p slot="content">等级：{{item.sourceLevel}}</p>
                            <p slot="content">获取声望途径：{{item.renownSource}}</p>
                            <p slot="content">声望商：{{item.renownTrader}}</p>
                            <p slot="content">家园币：{{item.jiaYuanBiConsume}}</p>
                            <p slot="content">金币：{{item.jinBiConsume}}</p>
                        </div>
                        <div slot="content" v-if="item.source.toString() === '2'">来源：梓匠

                        </div>
                        <div slot="content" v-if="item.source.toString() === '3'">来源：其他

                        </div>

                        <div style="text-align: center">
                            <el-image :preview-src-list="[item.thumbnailUrl]"
                                      :src="item.thumbnailUrl"
                                      alt="家具缩略图"
                                      fit="cover"
                                      style="height: 280px"
                            >
                                <div class="image-slot" slot="error">
                                    还未上传家具图片
                                </div>
                                <div class="image-slot" slot="placeholder">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                        </div>
                    </el-tooltip>
                    <div style="color: black;font-size: 15px">
                        <p id="fiveValue">
                            <span :class="fiveValueColor(item.guanShang)">观赏：{{item.guanShang}}</span>
                            <span :class="fiveValueColor(item.shiYong)">实用：{{item.shiYong}}</span>
                            <br>
                            <span :class="fiveValueColor(item.jianGu)">坚固：{{item.jianGu}}</span>
                            <span :class="fiveValueColor(item.fengShui)">风水：{{item.fengShui}}</span>
                            <br>
                            <span :class="fiveValueColor(item.quWei)">趣味：{{item.quWei}}</span>
                        </p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row style="margin-top: 50px" v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
            <p style='text-align: center;font-size:20px' v-if="noMore">就这么多，没有更多了</p>
        </el-row>
    </div>

</template>

<script>
    import infiniteScroll from 'vue-infinite-scroll'
    import SearchBar from "@/components/furniture/SearchBar";
    import {loadData} from "@/components/common/method-transmit";

    export default {
        name: 'Furnitures',
        components: {SearchBar},
        directives: {infiniteScroll},
        data() {
            return {
                furnitures: [],
                currentPage: 1,
                pageSize: 10,
                total: 1,
                url: '/furniture',
                disableLoad: false,
                loading: true,
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ]
            }
        },
        computed: {
            noMore() {
                return this.furnitures.length >= this.total
            }
        },
        methods: {
            loadMore() {
                this.loadData(this.currentPage++, this.pageSize)
            },
            async loadData(current, size) {
                this.loading = true
                var param = this.$refs.searchBar.searchFurnitureForm
                var result = await loadData(current, size, param, this.url)
                if (result.success) {
                    result.data.data.data.records.forEach(e => {
                        this.furnitures.push(e)
                    })
                    this.total = result.data.data.data.total
                    if (this.furnitures.length >= this.total) {
                        this.disableLoad = true
                        this.loading = false
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '网络连接错误，请稍后重试  ' + result.data
                    });
                }

            },
            initParamAndLoad() {
                this.furnitures = []
                this.currentPage = 1
                this.pageSize = 10
                this.total = 1
                this.disableLoad = false
                this.loading = true
                this.loadMore()
            }
            ,
            levelColor(level) {
                switch (level) {
                    case 0:
                        return 'white'
                    case 1:
                        return 'green'
                    case 2:
                        return 'blue'
                    case 3:
                        return 'purple'
                }
            }
            ,
            fiveValueColor(value) {
                if (value > 6000) {
                    return 'greater-than6000'
                }
                if (value > 5000) {
                    return 'greater-than5000'
                }
                if (value > 4000) {
                    return 'greater-than4000'
                }
                if (value > 3000) {
                    return 'greater-than3000'
                }
                if (value > 2000) {
                    return 'greater-than2000'
                }
                if (value > 1000) {
                    return 'greater-than1000'
                }
                if (value > 500) {
                    return 'greater-than500'
                }
                if (value > 100) {
                    return 'greater-than100'
                }
            }
        }
    }
</script>

<style scoped>

    #fiveValue span {
        margin: 5px 0 0 20px;
        display: inline-block;
        width: 100px;
    }

    .greater-than100 {
        color: #781e05;
    }

    .greater-than500 {
        color: #ffcc66;
    }

    .greater-than1000 {
        color: #ff834e;
    }

    .greater-than2000 {
        color: #ff6666;
    }

    .greater-than3000 {
        color: #ff3366;
    }

    .greater-than4000 {
        color: #ff0066;
    }

    .greater-than5000 {
        color: #ff0033;
    }

    .greater-than6000 {
        color: #ff0000;
    }

    .white {
        color: white;
    }

    .green {
        color: green;
    }

    .blue {
        color: blue;
    }

    .purple {
        color: #BE2DC3;
    }
</style>
